<template>
  <a-spin :spinning="loading">
    <div class="mt-2 w-full overflow-auto pb-2">
      <table class="min-w-[1500px] overflow-hidden">
        <tbody>
          <tr>
            <th colspan="4" class="h-bgc h-text">右眼（OD）</th>
            <th colspan="4" class="h-bgc h-text">左眼（OS）</th>
          </tr>
          <tr>
            <td class="td-title">远视力（裸眼）</td>
            <td class="td-input"><a-input v-model:value="tableData.mBLJLB_SL.lysl_y_od" placeholder="请输入" @blur="onInputBlur" /></td>
            <td class="td-title">近视力（裸眼）</td>
            <td class="td-input"><a-input v-model:value="tableData.mBLJLB_SL.lysl_j_od" placeholder="请输入" @blur="onInputBlur" /></td>
            <td class="td-title">远视力（裸眼）</td>
            <td class="td-input"><a-input v-model:value="tableData.mBLJLB_SL.lysl_y_os" placeholder="请输入" @blur="onInputBlur" /></td>
            <td class="td-title">近视力（裸眼）</td>
            <td class="td-input"><a-input v-model:value="tableData.mBLJLB_SL.lysl_j_os" placeholder="请输入" @blur="onInputBlur" /></td>
          </tr>
          <tr>
            <td class="td-title">远视力（矫正）</td>
            <td class="td-input"><a-input v-model:value="tableData.mBLJLB_SL.jzsl_y_od" placeholder="请输入" @blur="onInputBlur" /></td>
            <td class="td-title">近视力（矫正）</td>
            <td class="td-input"><a-input v-model:value="tableData.mBLJLB_SL.jzsl_j_od" placeholder="请输入" @blur="onInputBlur" /></td>
            <td class="td-title">远视力（矫正）</td>
            <td class="td-input"><a-input v-model:value="tableData.mBLJLB_SL.jzsl_y_os" placeholder="请输入" @blur="onInputBlur" /></td>
            <td class="td-title">近视力（矫正）</td>
            <td class="td-input"><a-input v-model:value="tableData.mBLJLB_SL.jzsl_j_os" placeholder="请输入" @blur="onInputBlur" /></td>
          </tr>
          <tr>
            <td class="td-title">眼压</td>
            <td colspan="3">
              <a-input v-model:value="tableData.mBLJLB_YY.yy_od" class="!w-40" placeholder="请输入" suffix="mmHg" @blur="onInputBlur" />
            </td>
            <td class="td-title">眼压</td>
            <td colspan="3">
              <a-input v-model:value="tableData.mBLJLB_YY.yy_os" class="!w-40" suffix="mmHg" placeholder="请输入" @blur="onInputBlur" />
            </td>
          </tr>
          <tr>
            <td class="td-title">电脑验光</td>
            <td colspan="3">
              <a-input v-model:value="tableData.listBLJLB_YG_DATA.sph_od" class="!w-28 ml-1" suffix="DS" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_YG_DATA.cyl_od" class="!w-28 ml-1" suffix="DC X" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_YG_DATA.axis_od" class="!w-28 ml-1" suffix="°" placeholder="请输入" @blur="onInputBlur" />
            </td>
            <td class="td-title">电脑验光</td>
            <td colspan="3">
              <a-input v-model:value="tableData.listBLJLB_YG_DATA.sph_os" class="!w-28 ml-1" suffix="DS" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_YG_DATA.cyl_os" class="!w-28 ml-1" suffix="DC X" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_YG_DATA.axis_os" class="!w-28 ml-1" suffix="°" placeholder="请输入" @blur="onInputBlur" />
            </td>
          </tr>
          <tr>
            <td class="td-title">插片验光（矫正）</td>
            <td>
              <a-input v-model:value="tableData.listBLJLB_CP_DATA.sph_od" class="!w-24 2xl:!w-28" suffix="DS" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_CP_DATA.cyl_od" class="!w-24 2xl:!w-28" suffix="DC X" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_CP_DATA.axis_od" class="!w-24 2xl:!w-28" suffix="°" placeholder="请输入" @blur="onInputBlur" />
            </td>
            <td class="td-title">插片后视力</td>
            <td class="td-input">
              <!-- {{ tableData.listBLJLB_CP_DATA ? (tableData.listBLJLB_CP_DATA.va_od ? tableData.listBLJLB_CP_DATA.va_od : '-') : '-' }} -->
              <a-input v-model:value="tableData.listBLJLB_CP_DATA.va_od" class="!h-6 ml-1" placeholder="请输入" @blur="onInputBlur" />
            </td>
            <td class="td-title">插片验光（矫正）</td>
            <td>
              <a-input v-model:value="tableData.listBLJLB_CP_DATA.sph_os" class="!w-24 2xl:!w-28" suffix="DS" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_CP_DATA.cyl_os" class="!w-24 2xl:!w-28" suffix="DC X" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_CP_DATA.axis_os" class="!w-24 2xl:!w-28" suffix="°" placeholder="请输入" @blur="onInputBlur" />
            </td>
            <td class="td-title">插片后视力</td>
            <td class="td-input">
              <a-input v-model:value="tableData.listBLJLB_CP_DATA.va_os" class="!h-6 ml-1" placeholder="请输入" @blur="onInputBlur" />
            </td>
          </tr>
          <tr>
            <td class="td-title">散瞳验光</td>
            <td class="flex !border-none justify-center">
              <a-input v-model:value="tableData.listBLJLB_ST_DATA.sph_od" class="!w-24 2xl:!w-28" suffix="DS" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_ST_DATA.cyl_od" class="!w-24 2xl:!w-28" suffix="DC X" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_ST_DATA.axis_od" class="!w-24 2xl:!w-28" suffix="°" placeholder="请输入" @blur="onInputBlur" />
            </td>
            <td class="td-title">散瞳后视力</td>
            <td class="td-input">
              <a-input v-model:value="tableData.listBLJLB_ST_DATA.va_od" class="!h-6 ml-1" placeholder="请输入" @blur="onInputBlur" />
            </td>
            <td class="td-title">散瞳验光</td>
            <td class="flex !border-none justify-center">
              <a-input v-model:value="tableData.listBLJLB_ST_DATA.sph_os" class="!w-24 2xl:!w-28" suffix="DS" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_ST_DATA.cyl_os" class="!w-24 2xl:!w-28" suffix="DC X" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.listBLJLB_ST_DATA.axis_os" class="!w-24 2xl:!w-28" suffix="°" placeholder="请输入" @blur="onInputBlur" />
            </td>
            <td class="td-title">散瞳后视力</td>
            <td class="td-input">
              <a-input v-model:value="tableData.listBLJLB_ST_DATA.va_os" class="!h-6 ml-1" placeholder="请输入" @blur="onInputBlur" />
            </td>
          </tr>
          <tr>
            <td class="td-title">角膜曲率</td>
            <td colspan="3">
              <a-input v-model:value="tableData.mBLJLB_YBJC.jmql_hk_od" class="!w-28" suffix="@/" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.mBLJLB_YBJC.jmql_vk_od" class="!w-28" suffix="@" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.mBLJLB_YBJC.jmql_e_od" class="!w-28" suffix=" " placeholder="请输入" @blur="onInputBlur" />
            </td>
            <td class="td-title">角膜曲率</td>
            <td colspan="3">
              <a-input v-model:value="tableData.mBLJLB_YBJC.jmql_hk_os" class="!w-28" suffix="@/" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.mBLJLB_YBJC.jmql_vk_os" class="!w-28" suffix="@" placeholder="请输入" @blur="onInputBlur" />
              <a-input v-model:value="tableData.mBLJLB_YBJC.jmql_e_os" class="!w-28" suffix=" " placeholder="请输入" @blur="onInputBlur" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </a-spin>
</template>
<script setup>
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const emit = defineEmits(['success'])
const props = defineProps({
  resourceData: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  },
  jzbh: {
    type: String,
    default: ''
  },
  setbh: {
    type: String,
    default: ''
  }
})
const tableData = ref({
  mBLJLB_SL: {},
  mBLJLB_YY: {},
  listBLJLB_YG_DATA: {},
  listBLJLB_CP_DATA: {},
  listBLJLB_ST_DATA: {},
  mBLJLB_YBJC: {}
})
const onInputBlur = () => {
  onSaveTable()
}
const onSaveTable = async () => {
  const params = {
    jzbh: props.jzbh,
    setbh: props.setbh,
    sl: tableData.value.mBLJLB_SL,
    yy: tableData.value.mBLJLB_YY,
    yg: [tableData.value.listBLJLB_YG_DATA, tableData.value.listBLJLB_CP_DATA, tableData.value.listBLJLB_ST_DATA],
    ybjc: tableData.value.mBLJLB_YBJC
  }
  const { code, msg } = await post('/outp/mzys/doSaveCgjc', { ...params })
  if (code !== 0) return message.error(msg || '保存失败')
  emit('success')
  message.success(msg || '保存成功')
}

watch(
  () => props.resourceData,
  (val) => {
    tableData.value = val
    if (!tableData.value.mBLJLB_SL) tableData.value.mBLJLB_SL = {}
    if (!tableData.value.mBLJLB_YY) tableData.value.mBLJLB_YY = {}
    if (!tableData.value.listBLJLB_YG_DATA) tableData.value.listBLJLB_YG_DATA = {}
    if (!tableData.value.listBLJLB_CP_DATA) tableData.value.listBLJLB_CP_DATA = {}
    if (!tableData.value.listBLJLB_ST_DATA) tableData.value.listBLJLB_ST_DATA = {}
    if (!tableData.value.mBLJLB_YBJC) tableData.value.mBLJLB_YBJC = {}
  },
  { immediate: true }
)
</script>
<style lang="less" scoped>
table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid rgba(125, 125, 125, 0.3);
  border-collapse: collapse;
}

th {
  font-weight: normal;
}

th,
td {
  height: 48px;
  text-align: center;
}
td {
  :deep(.ant-input-affix-wrapper) {
    padding: 0 8px !important;
  }
}
.h-bgc {
  background-color: #eeeeee;
}

.h-text {
  color: #000;
  // font-weight: 500;
  font-size: 14px;
}

.td-title {
  width: 132px;
  color: #000;
  font-size: 14px;
  background-color: #eeeeee;
}

.b-text-info {
  color: #aaaaaa;
}
.ant-input,
.ant-input-affix-wrapper {
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: transparent;
  border: none;
}
.ant-input:focus {
  box-shadow: none;
}
:deep(.ant-input-affix-wrapper-focused) {
  box-shadow: none;
}
:deep(.ant-input-suffix) {
  color: #000 !important;
}
</style>
